<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>
<body>
<div class="nav">五子棋对战</div>
<!-- 整个页面的容器元素 -->
<div class="container">
    <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
    <div>
        <!-- 展示用户信息 -->
        <div id="screen"></div>
        <!-- 匹配按钮 -->
        <div id="match-button">开始匹配</div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script>
        $.ajax({
            type: 'get',
            url: '/userInfo',
            success: function(body) {
                let screenDiv = document.querySelector('#screen');
                screenDiv.innerHTML = '玩家: ' + body.username + " 分数: " + body.score
                    + "<br> 比赛场次: " + body.totalCount + " 获胜场数: " + body.winCount
            },
            error: function() {
                alert("获取用户信息失败!");
            }
        });

        // 1. 和服务器建立连接. 路径要写作 /findMatch, 不要写作 /findMatch/
        let websocket = new WebSocket('ws://127.0.0.1:8080/findMatch');
        // 2. 点击开始匹配
        let button = document.querySelector('#match-button');
        button.onclick = function() {
            if (websocket.readyState == websocket.OPEN) {
                if (button.innerHTML == '开始匹配') {
                    console.log('开始匹配!');
                    websocket.send(JSON.stringify({
                        message: 'startMatch',
                    }));
                } else if (button.innerHTML == '匹配中...(点击取消)') {
                    console.log('取消匹配!');
                    websocket.send(JSON.stringify({
                        message: 'stopMatch'
                    }));
                }
            } else {
                alert('当前您连接断开! 请重新登录!');
                location.assign('/login.html');
            }
        }

        // 3. 处理服务器的响应
        websocket.onmessage = function(e) {
            let resp = JSON.parse(e.data)
            if (!resp.ok) {
                console.log('游戏大厅中发生错误: ' + resp.reason);
                location.assign('/login.html');
                return;
            }
            if (resp.message == 'startMatch') {
                console.log('进入匹配队列成功!');
                button.innerHTML = '匹配中...(点击取消)';
            } else if (resp.message == 'stopMatch') {
                console.log('离开匹配队列成功!');
                button.innerHTML = '开始匹配';
            } else if (resp.message == 'matchSuccess') {
                console.log('匹配成功! 进入游戏页面!');
                location.assign('/game_room.html');
            } else {
                console.log('非法的 message: ' + resp.message);
            }
        }

        // 4. 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
        }
    </script>
</body>
</html>